<template>
  <div class="container">
    <el-card class="box-card">
      <div class="clearfix title-top">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          class="addQquestion"
          icon="el-icon-edit"
          size="small"
          @click="
            $router.push({
              path: '/questions/new',
              query: { redirect: '/questions/choice' }
            })
          "
        >
          新增试题
        </el-button>
      </div>

      <!-- 搜索区域 -->
      <el-form
        class="clearfix"
        label-width="80px"
        :form="subjectForm"
        ref="subjectFormRef"
        :model="subjectForm"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select
                size="small"
                placeholder="请选择"
                v-model="subjectForm.subjectID"
                @change="changeSubject"
                style="width:100%"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select
                size="small"
                v-model="subjectForm.catalogID"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in secondDirectory"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select
                size="small"
                v-model="subjectForm.tags"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in tagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input
                size="small"
                placeholder="根据题干搜索"
                v-model="subjectForm.keyword"
                style="width:100%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select
                size="small"
                v-model="subjectForm.questionType"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                size="small"
                v-model="subjectForm.difficulty"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                size="small"
                v-model="subjectForm.direction"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select
                size="small"
                v-model="subjectForm.creatorID"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in creatorIDList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                size="small"
                v-model="subjectForm.remarks"
                style="width:100%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input
                size="small"
                v-model="subjectForm.shortName"
                style="width:100%"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                size="small"
                v-model="subjectForm.province"
                placeholder="请选择"
                style="width: 49%;margin-right:2%"
                @change="changeProvince"
              >
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                size="small"
                v-model="subjectForm.city"
                placeholder="请选择"
                style="width: 49%"
              >
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :value="item"
                  :label="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button size="small" @click="clearHistory">清除</el-button>
              <el-button type="primary" size="small" @click="getList"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- /搜索区域 -->
      <!-- tab栏切换 -->
      <el-tabs v-model="active" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="10"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"> </el-tab-pane>
      </el-tabs>
      <!-- /tab栏切换 -->
      <!-- 提示信息 -->
      <el-alert type="info" show-icon :closable="false" class="count-msg">
        <span slot="title"> 数据一共{{ tableData.length }}条 </span>
      </el-alert>
      <!-- /提示信息 -->
      <!-- 表单数据 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="试题编号" width="120">
            <span slot-scope="scope">{{ scope.row.number }}</span>
          </el-table-column>
          <el-table-column label="学科" width="120">
            <span slot-scope="scope">{{ scope.row.subject }}</span>
          </el-table-column>
          <el-table-column label="目录" width="120">
            <span slot-scope="scope">{{ scope.row.catalog }}</span>
          </el-table-column>
          <el-table-column label="题型" width="120">
            <span slot-scope="scope">{{
              questionTypeList[scope.row.questionType - 1].label
            }}</span>
          </el-table-column>
          <el-table-column label="题干" width="280">
            <span slot-scope="scope" v-html="scope.row.question"></span>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <span slot-scope="scope">{{
              scope.row.addDate | parseTimeByString
            }}</span>
          </el-table-column>
          <el-table-column label="难度">
            <span slot-scope="scope">{{
              difficultyList[scope.row.difficulty - 1].label
            }}</span>
          </el-table-column>
          <el-table-column label="录入人" width="120">
            <span slot-scope="scope">{{ scope.row.creator }}</span>
          </el-table-column>
          <el-table-column label="审核状态" width="120">
            <span slot-scope="scope">{{
              chkTypeList[scope.row.chkState].label
            }}</span>
          </el-table-column>
          <el-table-column label="审核意见" width="150">
            <span slot-scope="scope">{{ scope.row.chkRemarks }}</span>
          </el-table-column>
          <el-table-column label="审核人" width="120">
            <span slot-scope="scope">{{ scope.row.chkUser }}</span>
          </el-table-column>
          <el-table-column label="发布状态" width="150">
            <span
              slot-scope="scope"
              v-html="
                scope.row.chkState === 0
                  ? '待发布'
                  : scope.row.publishState === 1
                  ? '已发布'
                  : '已下架'
              "
            ></span>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click="questionPreview(scope.row.id)"
                type="text"
                size="small"
                >预览</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.chkState === 0 ? false : true"
                @click="choiceCheckItem(scope.row)"
                >审核</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1 ? true : false"
                @click="
                  $router.push({
                    path: '/questions/new',
                    query: { id: scope.row.id, redirect: '/questions/choice' }
                  })
                "
                >修改</el-button
              >

              <el-button
                type="text"
                size="small"
                v-html="scope.row.publishState === 1 ? '下架' : '上架'"
                @click="choicePublishItem(scope.row)"
              ></el-button>
              <!-- <el-button type="text" size="small" v-else>上架</el-button> -->
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1 ? true : false"
                @click="removeItem(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- /表单数据 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 审核功能 -->
    <el-dialog
      width="30%"
      title="题目审核"
      :visible.sync="isCheckPreviewDialogFormVisible"
      v-if="isCheckPreviewDialogFormVisible"
    >
      <el-form :model="CheckForm">
        <el-form-item>
          <el-radio v-model="CheckForm.chkState" :label="1">通过</el-radio>
          <el-radio v-model="CheckForm.chkState" :label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核意见"
            v-model="CheckForm.chkRemarks"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isCheckPreviewDialogFormVisible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="addCheck">确认</el-button>
      </div>
    </el-dialog>

    <!-- 题目预览 -->
    <el-dialog
      title="题目预览"
      :visible.sync="isQuestionsPreviewDialogVisible"
      width="45%"
      v-if="isQuestionsPreviewDialogVisible"
      @close="previewId = 0"
    >
      <questions-preview :id="previewId" />
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="isQuestionsPreviewDialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  choice,
  remove,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleUsers } from '@/api/base/users'
import { simple as simpleDirectory } from '@/api/hmmm/directorys'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import {
  difficulty,
  questionType,
  publishType,
  chkType,
  direction
} from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview'

export default {
  name: 'QuestionsChoice',
  components: { QuestionsPreview },
  data() {
    return {
      subjectForm: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        catalogID: null, // 目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 题型
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 企业所在省份
        city: null // 企业所在城市
      },
      // value: '',
      // radio: 3,
      // textarea2: '',
      tableData: [],
      difficultyList: difficulty, // 难度
      questionTypeList: questionType, // 题型
      publishTypeList: publishType, // 发布状态
      chkTypeList: chkType, // 审核状态
      directionList: direction, // 方向
      page: 1,
      pagesize: 5,
      total: 0,
      subjectList: [], // 学科列表数据
      secondDirectory: [], // 二级目录数据
      tagsList: [], // 标签列表数据
      creatorIDList: [], // 录入人
      provinceList: [], // 城市
      cityList: [], // 城市
      isCheckPreviewDialogFormVisible: false,
      CheckForm: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      },
      active: '10',
      // 预览
      isQuestionsPreviewDialogVisible: false,
      previewId: 0
    }
  },

  created() {
    // 渲染列表
    this.getList()
    // 获取学科数据
    this.getSubjectList()
    // 获取录入人
    this.getSimpleUsers()
    // 获取城市
    this.provinceList = provinces()
  },

  methods: {
    handleClick(tab, event) {
      this.getList()
    },
    // 获取数据
    async getList() {
      const q = { ...this.subjectForm }
      q.page = this.page
      q.pagesize = this.pagesize
      if (this.active !== '10') q.chkState = this.active
      // console.log(q, 2343)
      const { data } = await choice(q)

      this.tableData = data.items
      // console.log(this.tableData)
      this.total = data.counts
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.pagesize = val
      if (this.page === 1) {
        this.getList()
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },

    // #1.获取学科数据
    async getSubjectList() {
      try {
        const { data } = await simple()
        // console.log(data)
        this.subjectList = data
        // console.log(this.subjectList)
      } catch (err) {
        this.$message.err('获取学科分类失败')
      }
    },
    // #2. 学科数据改变  --- 选中之后才能触发二级目录获取
    changeSubject(val) {
      // 清空上一次的数据
      this.subjectForm.catalogID = null
      this.secondDirectory = []
      this.subjectForm.tags = null
      this.tagsList = []
      this.getSecondDirectory(val)
      this.getTagsList(val)
    },
    // #3 获取二级目录
    async getSecondDirectory(val) {
      try {
        const { data } = await simpleDirectory({
          subjectID: val
        })
        // console.log(data)
        this.secondDirectory = data
      } catch (err) {
        this.$message.error('获取二级目录失败')
      }
    },
    // #4 获取标签
    async getTagsList(val) {
      try {
        const { data } = await simpleTags({
          subjectID: val
        })
        // console.log(data)
        this.tagsList = data
      } catch (err) {
        this.$message.error('获取标签失败')
      }
    },
    // #5 录入人
    async getSimpleUsers() {
      try {
        const { data } = await simpleUsers()
        // console.log(data)
        this.creatorIDList = data
      } catch (err) {
        this.$message.error('获取录入人失败')
      }
    },
    // #6 城市
    changeProvince(val) {
      this.cityList = []
      this.subjectForm.city = null
      this.cityList = citys(val)
    },
    // #7 清除记录
    clearHistory() {
      this.cityList = []
      this.secondDirectory = []
      this.tagsList = []
      this.subjectForm.city = null
      this.subjectForm.province = null
      this.$refs.subjectFormRef.resetFields()
      this.getList()
    },
    // 1. 删除功能
    async removeItem(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') return

      try {
        await remove(id)
        // console.log(id)
        this.$message.success('删除成功')
        this.getList()
      } catch (err) {
        this.$message.error('删除数据失败')
      }
    },
    // 2.上架功能
    async choicePublishItem(row) {
      if (row.publishState === 1) {
        const confirmResult = await this.$confirm(
          '您确认下架这道题目吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)

        if (confirmResult !== 'confirm') return
        row.publishState = 0
        await choicePublish(row)
        // console.log(row.publishState)
      } else {
        const confirmResult = await this.$confirm(
          '您确认上架这道题目吗?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)

        if (confirmResult !== 'confirm') return
        row.publishState = 1
        await choicePublish(row)
      }
    },

    // 3. 审核功能--点击弹窗
    choiceCheckItem(row) {
      this.isCheckPreviewDialogFormVisible = true
      // console.log(row)
      this.CheckForm.id = row.id
    },
    // 4. 审核功能--添加到精选题库
    async addCheck() {
      try {
        if (this.CheckForm.chkRemarks.trim().length === 0) {
          return this.$message.warning('请输入审核意见')
        }
        await choiceCheck(this.CheckForm)
        this.getList()
      } catch (err) {
        console.log(err)
      }
      this.isCheckPreviewDialogFormVisible = false
    },
    // 预览
    questionPreview(id) {
      this.isQuestionsPreviewDialogVisible = true
      this.previewId = id
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 10px;

  .box-card {
    width: 100%;
    .title-top {
      margin-bottom: 15px;
    }
    .explain {
      font-size: 12px;
      color: #ffc0cb;
    }
    .addQquestion {
      float: right;
      span {
        font-size: 12px;
      }
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .count-msg {
    margin-bottom: 15px;
  }

  .pagination {
    float: right;
    margin: 15px 0;
  }

  .dialog-footer {
    text-align: right;
    margin-top: 20px;
  }
  /deep/.el-dialog__footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
